<template>
  <div class="search">
    <div class="top">
      <div class="topleft"  @click="handleBack">
        <span class="iconfont iconjiantou2"></span>
      </div>
      <div class="ipt">
        <input
          type="text"
          name
          id
          class="iptk"
          placeholder="通灵兽消失术"
          v-model="keyword"
          @keyup.enter="searchinput"
        />
        <span class="iconfont iconsearch"></span>
      </div>
      <div class="topright" @click="searchinput">搜索</div>
    </div>
    <!-- 历史记录部分 -->

    <div v-if='postlist.length==0'>
      <div class="history">
        <div class="title">
          <h3>历史记录</h3>
          <span class="iconfont iconicon-test" @click="canclehistory"></span>
        </div>
        <div class="record-list">
          <span class="xht" v-for="(value,index) in historylist" :key="index" @click="historysearch(value)">{{value}}</span>
        </div>
      </div>
      <!-- 热搜部分 -->
      <div class="hotsearch">
        <h3>热门搜索</h3>
        <span v-for='(value,index) in hotsearch' :key='index'>{{value.title}}</span><br>
      </div>
    </div>
    <div v-for="(value,index) in postlist" :key="index">
        <!-- 引入对应的文章列表，并且将data的值等于value传到子组件中 -->
      <postItem4 v-if="value.type==1 && value.cover.length>0 && value.cover.length<3" :data="value"></postItem4>
      <postItem5 v-if="value.type==1 && value.cover.length >=3" :data="value"></postItem5>
      <postItem6 v-if="value.type==2" :data="value"></postItem6>
    </div>
  </div>
</template>
<script>
// 引入文章列表的组件
import postItem4 from "../components/postitem4";
import postItem5 from "../components/postItem5";
import postItem6 from "../components/postItem6";

export default {
  data() {
    return {
      keyword: "", //输入框里面的值
      historylist: [], //表示一个历史记录
      postlist: [], //文章列表
      hotsearch:[] //搜索列表的文章
    };
  },
  components: {
    //   注册对应的文章列表
    postItem4,
    postItem5,
    postItem6,
  },
      //   做一个数据监听，第一个是监听的是热搜的状况，并且将这两个列表放在本地储存中
  watch:{
      hotsearch(){
        localStorage.setItem('hotsearch',JSON.stringify(this.hotsearch))
      },
     //  将历史记录放在本地存储中
        historylist(){
            localStorage.setItem('history',JSON.stringify(this.historylist))
        },
  },
  created(){
    //假如历史历史记录里面有东西，那么当刷新页面的时候，需要将本地的内容放到定义的历史记录中
         if(localStorage.getItem('history')){
             this.historylist=JSON.parse(localStorage.getItem('history'))
         };
    // 一刷新页面的时候，假如页面中是存在热搜的内容，那么让热搜列表的内容等于本地存储中得到的值
         if(localStorage.getItem('hotsearch')){
             this.hotsearch=JSON.parse(localStorage.getItem('hotsearch'))
         };

             },
  methods: {
    searchinput() {
        // 点击了搜索按钮的时候，触发了点击事件，并且发起axios请求
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res);
        const { data } = res.data;
        this.postlist = data;
        // console.log(this.postlist);       
        this.historylist.unshift(this.keyword);// 在这个数组的最前面中插入这个keyword值
        // console.log(this.historylist);
        this.historylist = [...new Set(this.historylist)]; //数组的去重，运用的是es6的方法
      });
    // 当在点击了按钮之后，继续发出第二个请求，发起热搜的请求
        this.$axios({
               url:'/post_search_recommend',
               params:{
                 keyword:this.keyword
            }
             }).then((res)=>{
                //  console.log(232,res);
                 const {data}= res.data;
                 this.hotsearch=data
                 console.log(this.hotsearch);

             })
    },
    // 这里做的是当点击关键字的时候，让关键字回显到输入框中，并且调用搜索的函数
    historysearch(keyword){
            this.keyword= keyword
            this.searchinput()
    },
    // 这里做的是点击箭头的函数，当点击回退按钮的时候，当文章列表的长度为零，当列表等于0只是为了让文章栏消失，并且让隐藏框显示出来
    handleBack(){
             if(this.postlist.length>0){
                 this.keyword=''
                  this.postlist.length=0
             }
             else{
                 this.$router.back()
             }
    },
    // 这里可以做一个删除历史记录的按钮，点击的时候，令历史记录的本地储存清空
    canclehistory() {
      this.historylist = [];
    },
  },
};
</script>

<style lang="less">
.search {
  padding: 15/360 * 100vw;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .iconjiantou2 {
      font-size: 28px;
    }
    .ipt {
      position: relative;
      flex: 1;
      .iptk {
        width: 258/360 * 100vw;
        height: 38/360 * 100vw;
        outline: none;
        // border: none;
        border-radius: 19/360 * 100vw;
        border-color: #888;
        padding-left: 44/360 * 100vw;
        box-sizing: border-box;
      }
      .iconsearch {
        position: absolute;
        left: 30/360 * 100vw;
        top: 3.5vw;
        font-size: 16/360 * 100vw;
        color: #888;
      }
    }
    .topright {
      font-size: 16px;
      color: #888;
    }
  }
  .history {
    margin-top: 20/360 * 100vw;
    border-bottom: 1px solid #cccccc;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .record-list {
      margin-top: 20/360 * 100vw;
      span {
        line-height: 50px;
        padding: 0 10px;
        margin-right: 20/360 * 100vw;
        border: 1px solid #cccccc;
        width: 28/360 * 100vw;
        text-align: center;
        margin-bottom: 20/360 * 100vw;
      }
    }
  }
  .hotsearch {
    margin-top: 20/360 * 100vw;
    span {
      padding-right: 20px;
      font-size: 18px;
      color: black;
      line-height: 50/360 * 100vw;
    }
  }
}
</style>